import React, { Component } from "react";
import {
    LineChart,
    Line,
    XAxis,
    YAxis,
    CartesianGrid,
    Tooltip,
    ResponsiveContainer
} from "recharts";
import PubSub from 'pubsub-js'
import { meshLog, SPRemove, SPGet, SPSet } from "../../../config";
import "./energyChart.less";
import {
    sumHexBytes, transIntToHex4Str, getOctets2Msg, transIntToHex2Str,
    bigEndianToLittleEndian
} from '../../../utils/dataUtils'

class EnergyChart extends Component {
    state = {
        data: [
            { name: "0", value: 50 },
            { name: "1", value: 65 },
            { name: "2", value: 65 },
            { name: "3", value: 45 },
            { name: "4", value: 80 },
            { name: "5", value: 65 },
            { name: "6", value: 65 },
            { name: "7", value: 45 },
            { name: "8", value: 80 },
            { name: "9", value: 65 },
            { name: "10", value: 80 },
            { name: "11", value: 80 },
            { name: "12", value: 65 },
            { name: "13", value: 0 }
        ],
        dateRange: {
            start: "2025-02-10",
            end: "2025-02-10"
        },
        timeOption: "Today"
    };
    componentDidMount() {
        const timestamp = Math.floor(Date.now() / 1000);//当前的时间戳          25 25 0B 00 63 02 31 开始时间戳（4B）结束时间戳（4B） FF 02 02  查询指定日期电量
        //时间戳需要先-946684800，然后转成16进制的，然后在位置转换一下
        const wangguan = JSON.parse(SPGet("wangguan"))
        meshLog('wangguan', wangguan);
        const wangguanmac = bigEndianToLittleEndian(wangguan.macAddress)
        const timestamp16 = (timestamp - 946684800).toString(16)
        meshLog('timestamp16', timestamp16);
        const timestamp16fan = bigEndianToLittleEndian(timestamp16)
        // 获取当前时间
        const now = new Date();
        // 设置为前一天的时间（毫秒）
        const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
        // 获取前一天的秒级时间戳
        const yesterdaystamp = Math.floor(yesterday.getTime() / 1000);
        console.log(yesterdaystamp);

        let value = '25250B00630231' + bigEndianToLittleEndian((yesterdaystamp - 946684800).toString(16)) + timestamp16fan + 'FF5252'

        var data = '1,' + wangguanmac + ',' + value + ',';

        meshLog('datadata', data);
        // PubSub.publish('showUpdate', data)//控制mqtt发信息还没写

        console.log(timestamp);
    }

    handleDateChange = (e) => {
        const { name, value } = e.target;
        this.setState((prevState) => ({
            dateRange: {
                ...prevState.dateRange,
                [name]: value
            }
        }));
        meshLog(name, value);
    };

    handleTimeOptionChange = (e) => {
        this.setState({ timeOption: e.target.value });
        meshLog("timeOption", e.target.value);
    };

    render() {
        const { data, dateRange, timeOption } = this.state;

        return (
            <div className="energy-chart-container">
                <div className="energy-header">
                    <h3 className="title">Energy consumption curve</h3>
                    <div className="controls">
                        <select
                            value={timeOption}
                            onChange={this.handleTimeOptionChange}>
                            <option value="Today">Today</option>
                            <option value="Yesterday">Yesterday</option>
                            <option value="Last7Days">Last 7 Days</option>
                        </select>

                        <div className="date-range-group">
                            <input
                                type="date"
                                name="start"
                                value={dateRange.start}
                                onChange={this.handleDateChange}
                            />
                            <span className="range-separator">~</span>
                            <input
                                type="date"
                                name="end"
                                value={dateRange.end}
                                onChange={this.handleDateChange}
                            />
                        </div>
                    </div>
                </div>

                <div className="chart">
                    <ResponsiveContainer width="100%" height="100%">
                        <LineChart data={data}>
                            <CartesianGrid strokeDasharray="3 3" />
                            <XAxis dataKey="name" />
                            <YAxis domain={[0, 100]} />
                            <Tooltip />
                            <Line
                                type="monotone"
                                dataKey="value"
                                stroke="#1f77b4"
                                strokeWidth={2}
                                fill="#cce5ff"
                                dot={{ r: 4 }}
                            />
                        </LineChart>
                    </ResponsiveContainer>
                </div>
            </div>
        );
    }
}

export default EnergyChart;
